<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet"/>
    <link th:href="@{/css/common.css}" rel="stylesheet"/>
</head>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <script type="text/html" id="tableBar">
                <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add">
                    <i class="layui-icon layui-icon-add-1">添加</i>
                </button>
            </script>
            <table class="layui-table" id="dataTable" lay-filter="dataTable"></table>
            <script type="text/html" id="toolbar">
                <button class="layui-btn layui-btn-xs layui-btn-text" lay-event="delete">
                    <i class="layui-icon layui-icon-edit">删除</i>
                </button>
            </script>
        </div>
    </div>
</div>
<div class="layui-form" style="display: none" id="dataForm" lay-filter="dataForm">
    <div class="layui-form-item">
        <input name="clubId" type="hidden">
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" for="clubId">社团类型</label>
        <div class="layui-input-block">
            <select class="layui-select" id="clubId" name="clubId" lay-verify="select" lay-search
                    lay-filter="clubId" value=""></select>
        </div>
    </div>
    <div class="layui-form-item layui-hide">
        <button lay-submit lay-filter="saveBtn" id="saveBtn"></button>
    </div>
</div>
     <th:block th:include="include :: footer"/>
     <script th:src="@{/layui/layui.js}"></script>
    <script th:inline="none">
        layui.use(["table", "form"], () => {
            const table = layui.table, form = layui.form, $ = layui.$;

            let typeOptions = []
            const renderTypeSelector = () => {
                $("#clubId").empty().append(new Option("请选择要推荐的社团", ""));
                $.ajax({
                    url: ctx + "club/club/getClubList",
                    method: "get",
                    success: ({data}) => {
                        typeOptions = data;
                        data.forEach(g => {
                            $("#clubId").append(new Option(g.clubName, g.clubId));
                        })
                        form.render("select");
                    }
                })
            }

            const cols = [[
                {type: "numbers"},
                {title: "社团名称", field: "clubName"},
                {title: "加入的人数",field: "people"},
                {title: "创建时间", field: "createTime"},
                {title: "修改时间", field: "updateTime"},
                {title: "操作栏", toolbar: "#toolbar", fixed: "right"}
            ]];

            const dataTable = table.render({
                elem: "#dataTable",
                height: "700px",
                toolbar: "#tableBar",
                id: "dataTable",
                page: false,
                url: ctx + "recommend/recommend/list",
                cols: cols
            });

            table.on("toolbar(dataTable)", (obj) => {
                const {event, data, tr} = obj;
                switch (event) {
                    case "add":
                        form.val("dataForm", {
                            clubId: ''
                        });
                        renderTypeSelector();
                        openDataForm(() => {
                            $("#saveBtn").click();
                        })
                        break;
                    default:
                        return false;
                }
            })

            const openDataForm = resolve => {
                layer.open({
                    type: 1,
                    content: $("#dataForm"),
                    area: ["700px", "700px"],
                    btn: ["确定", "取消"],
                    btnAlign: "c",
                    yes: resolve
                })
            }

            form.on("submit(saveBtn)", data => {
                const url = "recommend/recommend/save"
                $.ajax({
                    url: ctx + url,
                    method: "post",
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(data.field),
                    success: ({code, msg}) => {
                        if (code !== 0) {
                            return layer.msg(msg, {icon: 5})
                        }
                        dataTable.reload();
                        layer.closeAll();
                    }
                })
            })

            table.on("tool(dataTable)", (obj) => {
                const {event, data} = obj;
                switch (event) {
                    case "delete":
                        layer.confirm("确定移除该推荐的社团|协会吗？", () => {
                            $.ajax({
                                url: ctx + "recommend/recommend/" + data.id,
                                method: "delete",
                                success: ({code, msg}) => {
                                    if (code !== 0) {
                                        return layer.msg(msg, {icon: 5})
                                    }
                                    dataTable.reload();
                                    layer.closeAll();
                                }
                            })
                        })
                        break;
                }
            })
        })

    </script>
</body>
</html>